<template>
  <view class="team-detail-page">
    <!-- 顶部导航栏 -->
    <tn-nav-bar
      fixed
      backgroundColor="#020303"
      :isBack="false"
      fontColor="#FFFFFF">
      <!-- 左侧账号选择器 -->
      <view slot="left" class="nav-left" @click="toggleAccountSelector" v-if="currentGameAccount">
        <view class="account-selector">
          <image :src="currentGameAccount.avatar" class="account-avatar" mode="aspectFill"></image>
          <view class="account-info">
            <text class="account-name">{{currentGameAccount.nickname}}</text>
            <view class="account-rank-server">
              <text class="account-server">{{currentGameAccount.serverType === 'wechat' ? '微信区' : 'QQ区'}}</text>
              <text class="account-rank">{{currentGameAccount.rank}}</text>
            </view>
          </view>
          <text class="tn-icon-down account-arrow"></text>
        </view>
      </view>
      <view class="nav-title">队伍详情</view>
    </tn-nav-bar>

    <!-- 页面内容容器 -->
    <view class="page-content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <!-- 游戏风格加载动画 -->
        <view class="game-loading">
          <!-- 中心能量核心 -->
          <view class="energy-core">
            <view class="core-inner"></view>
            <view class="core-pulse"></view>
          </view>

          <!-- 旋转光环 -->
          <view class="orbit-ring ring-1">
            <view class="orbit-dot dot-1"></view>
            <view class="orbit-dot dot-2"></view>
            <view class="orbit-dot dot-3"></view>
          </view>

          <view class="orbit-ring ring-2">
            <view class="orbit-dot dot-1"></view>
            <view class="orbit-dot dot-2"></view>
            <view class="orbit-dot dot-3"></view>
            <view class="orbit-dot dot-4"></view>
          </view>

          <!-- 外层粒子环 -->
          <view class="particle-ring">
            <view class="particle" v-for="n in 8" :key="n" :class="'particle-' + n"></view>
          </view>

          <!-- 扫描线 -->
          <view class="scan-line"></view>

          <!-- 加载文字 -->
          <view class="loading-text-container">
            <text class="loading-text">正在加载队伍数据</text>
            <view class="loading-dots">
              <text class="dot">.</text>
              <text class="dot">.</text>
              <text class="dot">.</text>
            </view>
          </view>

          <!-- 进度条 -->
          <view class="progress-container">
            <view class="progress-bar">
              <view class="progress-fill"></view>
            </view>
            <text class="progress-text">LOADING...</text>
          </view>
        </view>
      </view>

      <!-- 队伍详情 -->
      <view v-else-if="teamDetail" class="team-container">
      <!-- 队伍信息卡片 -->
      <view class="team-card">
        <!-- 队长信息 -->
        <view class="team-header">
          <view class="team-creator">
            <image
              :src="teamDetail.creatorAvatar"
              class="creator-avatar"
              :class="{'male-border': teamDetail.creatorGender === 1, 'female-border': teamDetail.creatorGender !== 1}"
              mode="aspectFill"
            ></image>
            <view class="creator-info">
              <view class="creator-name">
                {{ teamDetail.creatorName || '匿名' }}
                <text :class="['gender-icon', teamDetail.creatorGender === 1 ? 'male' : 'female']">
                  <text v-if="teamDetail.creatorGender === 1" class="tn-icon-sex-male"></text>
                  <text v-else class="tn-icon-sex-female"></text>
                </text>
              </view>
              <view class="creator-rank">
                <view class="rank-badge">{{ teamDetail.rankName }}</view>
                <view class="server-badge">{{ teamDetail.serverType === 'wechat' ? '微信区' : 'QQ区' }}</view>
                <view class="team-type-badge">
                  {{ teamDetail.teamType === 'rank' ? '排位' : (teamDetail.teamType === 'fun' ? '娱乐' : '社交') }}
                </view>
              </view>
              <view class="creator-success-count">
                <text class="tn-icon-flag"></text>
                <text>成功组队: {{ teamDetail.creatorSuccessCount }}次</text>
              </view>
            </view>
          </view>
          <view class="team-status">
            <text>{{ teamDetail.teamStatus }}</text>
          </view>
        </view>

        <!-- 队伍基本信息 -->
        <view class="team-info">
          <view class="team-title">{{ teamDetail.title }}</view>
          <view class="team-desc">{{ teamDetail.description }}</view>

          <view class="team-details">
            <view class="team-detail">
              <text class="tn-icon-time"></text>
              <text>{{ teamDetail.createTime }}</text>
            </view>
            <view class="team-detail">
              <text class="tn-icon-people"></text>
              <text>{{ teamDetail.currentMembers }}/{{ teamDetail.maxMembers }}</text>
            </view>
            <view class="team-detail">
              <text class="tn-icon-location"></text>
              <text>{{ teamDetail.location }}</text>
            </view>
          </view>
        </view>

        <!-- 当前成员 -->
        <view class="team-members">
          <view class="team-member" v-for="(member, mIndex) in teamDetail.members" :key="mIndex" :class="{'current-user': member.isCurrentUser}">
            <image
              :src="member.avatar"
              class="member-avatar"
              :class="{'male-border': member.sex === 1, 'female-border': member.sex !== 1}"
              mode="aspectFill"
            ></image>
            <view class="member-position">{{ getPositionName(teamDetail, member.position) }}</view>
            <!-- 当前用户标记 -->
            <view class="current-user-badge" v-if="member.isCurrentUser">
              <text>我</text>
            </view>
            <!-- 当前用户是队长且组队完成时，显示拉黑选项 -->
            <view class="member-actions" v-if="isCurrentUserCreator(teamDetail) && teamDetail.teamStatus === '已完成' && teamDetail.creatorId !== member.userId">
              <view class="member-action blacklist" @tap.stop="toggleBlacklist(teamDetail, member)">
                <text :class="member.isBlacklisted ? 'tn-icon-block' : 'tn-icon-prohibit'"></text>
                <text>{{ member.isBlacklisted ? '取消' : '拉黑' }}</text>
              </view>
            </view>
          </view>
          <view
            v-for="(emptySlot, emptyIndex) in getEmptySlots(teamDetail)"
            :key="emptySlot.emptyId"
            class="team-member empty"
          >
            <text class="tn-icon-add"></text>
          </view>
        </view>

        <!-- 游戏ID和联系方式信息面板 -->
        <view class="game-id-panel" v-if="teamDetail.currentMembers > 0">
          <view class="panel-header">
            <text class="panel-title">游戏ID 与 联系方式</text>
            <view class="lock-status" v-if="!teamDetail.isContactUnlocked">
              <text class="tn-icon-lock"></text>
              <text v-if="teamDetail.joinedByCurrentUser">凑齐5人开黑后解锁</text>
              <text v-else-if="!teamDetail.joinedByCurrentUser && teamDetail.isTeamFull">队伍已满，仅成员可见</text>
              <text v-else>仅队伍成员可见</text>
            </view>
            <!-- 解锁状态不显示任何内容，界面更简洁 -->
          </view>

          <view class="game-ids-list">
            <view
              class="game-id-item"
              v-for="(member, index) in teamDetail.members"
              :key="index"
              :class="{'locked': !teamDetail.isContactUnlocked, 'current-user': member.isCurrentUser}"
            >
              <view class="id-position">
                {{ getPositionName(teamDetail, member.position) }}
              </view>
              <view class="id-value">
                <template v-if="teamDetail.isContactUnlocked">
                  <view class="id-row">
                    <text class="id-label">ID:</text>
                    <text>{{ member.gameId }}</text>
                  </view>
                  <view class="id-row">
                    <text class="id-label">{{ teamDetail.serverType === 'wechat' ? '微信' : 'QQ' }}:</text>
                    <text>{{ member.contactNumber }}</text>
                  </view>
                </template>
                <template v-else>••••••••</template>
              </view>
              <view class="id-actions" v-if="teamDetail.isContactUnlocked">
                <view class="id-copy" @tap="copyGameId(member.gameId)">
                  <text class="tn-icon-copy"></text>
                  <text class="copy-label">复制ID</text>
                </view>
                <view class="id-copy" @tap="copyContact(member.contactNumber)">
                  <text class="tn-icon-copy"></text>
                  <text class="copy-label">复制{{ teamDetail.serverType === 'wechat' ? '微信' : 'QQ' }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 邀请提示 - 仅显示给已加入的用户且队伍未满 -->
        <view
          class="invite-tip"
          v-if="teamDetail.joinedByCurrentUser && teamDetail.currentMembers < 5 && teamDetail.currentMembers >= 2"
        >
          <text class="tn-icon-info"></text>
          <text>再邀请{{5 - teamDetail.currentMembers}}人即可解锁游戏ID和联系方式</text>
        </view>

        <!-- 排位截图上传区域 -->
        <view class="record-action" v-if="isCurrentUserCreator(teamDetail) && teamDetail.teamStatus === '已完成' && (!teamDetail.rankScreenshot || teamDetail.rankResult === 0)">
          <!-- 添加上传截图重要性提示 -->
          <view class="upload-tip">
            <text class="tn-icon-info"></text>
            <text class="tip-text">作为队长，请上传排位赛截图记录本次组队成果！</text>
          </view>

          <view class="action-title">
            <view class="title-left">
              <text class="tn-icon-upload"></text>
              <text>上传排位截图</text>
            </view>
            <!-- 审核中状态显示 -->
            <view v-if="teamDetail.rankScreenshot && teamDetail.rankResult === 0" class="audit-status">
              <text class="audit-text">审核中</text>
            </view>
          </view>

          <view class="upload-area">
            <!-- 已上传的截图显示（可点击预览） -->
            <image v-if="teamDetail.uploadedRankScreenshot || teamDetail.rankScreenshot"
                   :src="teamDetail.uploadedRankScreenshot || teamDetail.rankScreenshot"
                   class="screenshot"
                   mode="aspectFill"
                   @tap="previewScreenshot(teamDetail.uploadedRankScreenshot || teamDetail.rankScreenshot)"></image>
            <!-- 未上传时的选择区域（可点击） -->
            <view v-else class="upload-placeholder" @tap="chooseRankScreenshot(teamDetail.id)">
              <text class="tn-icon-add"></text>
              <text>选择排位截图</text>
            </view>

            <!-- 上传进度 -->
            <view v-if="teamDetail.uploading" class="upload-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{width: teamDetail.uploadProgress + '%'}"></view>
              </view>
              <text class="progress-text">{{ teamDetail.uploadProgress }}%</text>
            </view>
          </view>

          <!-- 按钮区域 -->
          <view class="button-area">
            <!-- 首次上传：只显示提交按钮 -->
            <template v-if="!teamDetail.rankScreenshot">
              <button
                class="submit-btn single-btn"
                :disabled="!teamDetail.uploadedRankScreenshot || teamDetail.uploading"
                @tap="submitRankScreenshot(teamDetail.id)"
              >{{ teamDetail.uploadedRankScreenshot ? '提交截图' : '请先上传截图' }}</button>
            </template>

            <!-- 审核中状态：显示两个按钮 -->
            <template v-else-if="teamDetail.rankResult === 0">
              <button
                class="reupload-btn"
                :disabled="teamDetail.uploading"
                @tap="chooseRankScreenshot(teamDetail.id)"
              >重新上传</button>

              <button
                class="submit-btn"
                :disabled="teamDetail.uploading"
                @tap="submitRankScreenshot(teamDetail.id)"
              >{{ teamDetail.uploadedRankScreenshot ? '提交截图' : '重新提交' }}</button>
            </template>
          </view>
        </view>

        <!-- 队伍成员提示队长上传截图 -->
        <view class="member-upload-tip" v-if="!isCurrentUserCreator(teamDetail) && teamDetail.joinedByCurrentUser && teamDetail.teamStatus === '已完成' && !teamDetail.rankScreenshot">
          <view class="tip-content">
            <text class="tn-icon-info"></text>
            <text class="tip-text">组队已完成，等待队长上传排位截图记录战绩</text>
          </view>
        </view>

        <!-- 已上传排位截图状态显示 -->
        <view class="record-rated" v-if="teamDetail.rankScreenshot && (!isCurrentUserCreator(teamDetail) || teamDetail.rankResult !== 0)">
          <view class="rated-title">
            <text>排位截图</text>
            <view class="rank-result">
              <text class="result-text" :class="teamDetail.rankResult === 1 ? 'win' : (teamDetail.rankResult === 2 ? 'lose' : 'audit')">
                {{ teamDetail.rankResult === 1 ? '胜利' : (teamDetail.rankResult === 2 ? '失败' : '审核中') }}
              </text>
            </view>
          </view>
          <view class="rated-content">
            <view class="rated-screenshot">
              <image :src="teamDetail.rankScreenshot" class="screenshot" mode="aspectFill" @tap="previewScreenshot(teamDetail.rankScreenshot)"></image>
            </view>
          </view>
        </view>





        <!-- 操作按钮 -->
        <view class="team-actions" v-if="!(isCurrentUserCreator(teamDetail) && teamDetail.teamStatus === '已完成')">
          <button
            class="action-btn join-btn"
            :class="{
              'full': teamDetail.currentMembers >= teamDetail.maxMembers,
              'joined': teamDetail.joinedByCurrentUser && teamDetail.currentMembers < teamDetail.maxMembers,
              'completed': teamDetail.joinedByCurrentUser && teamDetail.currentMembers >= teamDetail.maxMembers
            }"
            :disabled="teamDetail.currentMembers >= teamDetail.maxMembers"
            @tap="joinTeam(teamDetail)"
          >
            <text v-if="teamDetail.joinedByCurrentUser && teamDetail.currentMembers >= teamDetail.maxMembers">
              组队已满
            </text>
            <text v-else-if="teamDetail.joinedByCurrentUser">
              退出
            </text>
            <text v-else>{{ teamDetail.currentMembers >= teamDetail.maxMembers ? '已满员' : '加入' }}</text>
          </button>
          <!-- #ifdef MP-WEIXIN -->
          <button
            class="action-btn chat-btn"
            :open-type="teamDetail.currentMembers >= teamDetail.maxMembers ? '' : 'share'"
            @tap="teamDetail.currentMembers >= teamDetail.maxMembers ? createNewTeam() : prepareShare(teamDetail)"
          >
            <text :class="teamDetail.currentMembers >= teamDetail.maxMembers ? 'tn-icon-add' : 'tn-icon-share'"></text>
            {{ teamDetail.currentMembers >= teamDetail.maxMembers ? '创建组队' : '邀请' }}
          </button>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <button
            class="action-btn chat-btn"
            @tap="teamDetail.currentMembers >= teamDetail.maxMembers ? createNewTeam() : showInviteModal(teamDetail)"
          >
            <text :class="teamDetail.currentMembers >= teamDetail.maxMembers ? 'tn-icon-add' : 'tn-icon-share'"></text>
            {{ teamDetail.currentMembers >= teamDetail.maxMembers ? '创建组队' : '邀请' }}
          </button>
          <!-- #endif -->
        </view>
      </view>
    </view>

      <!-- 队伍不存在 -->
      <view v-else class="not-found">
        <text class="not-found-text">队伍不存在或已解散</text>
        <button class="back-btn" @tap="goBack">返回列表</button>
      </view>

    </view>

    <!-- 固定浮动返回首页按钮 -->
    <view class="floating-home-btn" v-if="!loading" @tap="goHome">
      <text class="tn-icon-home-fill"></text>
      <text class="home-btn-text">首页</text>
    </view>

    <!-- 账号选择器弹窗 -->
    <tn-popup
      mode="bottom"
      v-model="showAccountSelectorPopup"
      :border-radius="20"
      backgroundColor="#202020"
      @close="hideAccountSelector"
    >
      <view class="account-popup">
        <view class="account-popup-header">
          <text class="popup-title">切换游戏账号</text>
          <!-- 添加刷新按钮 -->
          <text class="tn-icon-refresh refresh-btn" @tap="refreshAccountList"></text>
          <text class="tn-icon-close" @tap="hideAccountSelector"></text>
        </view>

        <!-- 加载状态 -->
        <view class="loading-container" v-if="accountsLoading">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 无账号提示 -->
        <view class="empty-account-tip" v-else-if="gameAccounts.length === 0">
          <text class="tn-icon-info empty-icon"></text>
          <text class="empty-text">您还没有添加游戏账号</text>
          <text class="empty-sub-text">请点击下方按钮添加</text>
        </view>

        <!-- 账号列表，添加滚动支持 -->
        <scroll-view
          class="account-list-scroll"
          v-else
          scroll-y="true"
          show-scrollbar="false"
        >
          <view class="account-list">
            <view
              class="account-item"
              v-for="(account, index) in gameAccounts"
              :key="index"
              :class="{
                'active': currentGameAccount && currentGameAccount.id === account.id,
                'disabled': account.auditStatus === 2
              }"
              @tap="switchAccount(account)"
            >
              <view class="item-info">
                <text class="item-name">{{account.nickname}}</text>
                <view class="item-game-rank">
                  <text class="item-server">{{account.serverType === 'wechat' ? '微信区' : 'QQ区'}}</text>
                  <text class="item-rank">{{account.rank}}</text>
                  <!-- 状态标签 -->
                  <text class="item-status" :class="{
                    'status-pending': account.auditStatus === 0,
                    'status-approved': account.auditStatus === 1,
                    'status-rejected': account.auditStatus === 2
                  }">
                    {{account.auditStatus === 0 ? '待审核' : account.auditStatus === 1 ? '已通过' : '已拒绝'}}
                  </text>
                </view>
              </view>
              <view class="item-actions">
                <text class="tn-icon-check item-check" v-if="currentGameAccount && currentGameAccount.id === account.id"></text>
                <text class="tn-icon-edit item-edit" @tap.stop="editGameAccount(account)"></text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="account-popup-footer">
          <button class="add-account-btn" @tap="addGameAccount">
            <text class="tn-icon-add"></text>
            添加游戏账号
          </button>
        </view>
      </view>
    </tn-popup>

    <!-- 邀请好友弹窗 -->
    <tn-popup
      mode="center"
      v-model="showInvitePopup"
      :border-radius="20"
      backgroundColor="#202020"
      @close="hideInvitePopup"
    >
      <view class="invite-popup">
        <view class="invite-popup-header">
          <text class="popup-title">邀请好友</text>
          <text class="tn-icon-close close-btn" @tap="hideInvitePopup"></text>
        </view>

        <view class="invite-content">
          <view class="invite-icon">
            <text class="tn-icon-team-fill"></text>
          </view>
          <text class="invite-message">{{ inviteMessage }}</text>
        </view>

        <view class="invite-actions">
          <!-- #ifdef MP-WEIXIN -->
          <!-- 微信小程序环境只显示分享按钮 -->
          <button
            class="invite-btn share-btn full-width"
            open-type="share"
            @tap="onShareButtonTap"
          >
            <text class="tn-icon-share"></text>
            微信分享
          </button>
          <!-- #endif -->

          <!-- #ifndef MP-WEIXIN -->
          <!-- 非微信环境显示复制链接按钮 -->
          <button
            class="invite-btn copy-btn full-width"
            @tap="copyInviteLink(currentInviteTeam)"
          >
            <text class="tn-icon-copy"></text>
            复制链接
          </button>
          <!-- #endif -->
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
import { getGameKingTeam, joinGameKingTeam, leaveGameKingTeam, getUserGameAccounts, switchDefaultAccount, uploadRankScreenshot, addBlacklist, removeBlacklist } from '@/api/game/index.js';
import { uploadFile } from '@/api/upload/index.js';
import { getAllRanks, getRankNameById, getRandomInviteMessage, getRandomShareTitleWithImage } from '@/utils/constants.js';
import { mapState } from 'vuex';
import config from '@/config/index.js';

export default {
  data() {
    return {
      teamId: null,
      teamDetail: null,
      loading: true,
      ranks: getAllRanks(),
      // 游戏账号相关
      gameAccounts: [],
      currentGameAccount: {
        id: 0,
        nickname: '请选择账号',
        avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg',
        rank: '',
        gameId: '',
        serverType: 'wechat',
        contactNumber: ''
      },
      showAccountSelectorPopup: false,
      accountsLoading: false,

      // 分享配置
      shareConfig: {
        title: '',
        path: '',
        imageUrl: '',
        team: null
      },
      // 控制邀请弹窗显示状态
      showInvitePopup: false,
      // 当前邀请的队伍
      currentInviteTeam: null,
      // 邀请消息
      inviteMessage: ''
    };
  },

  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo, // 从Vuex获取用户信息
      vuex_custom_bar_height: state => state.vuex_custom_bar_height // 获取导航栏高度
    })
  },

  created() {
    // 组件创建时获取用户游戏账号列表
    this.fetchUserGameAccounts();
  },

  onLoad(options) {
    if (options.id) {
      this.teamId = options.id;
      this.loadTeamDetail();
    } else {
      this.loading = false;
    }
  },

  onShow() {
    // 页面显示时重新获取用户游戏账号列表，确保登录状态正确
    this.fetchUserGameAccounts();
  },

  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
    // 如果是从按钮触发的分享
    if (res.from === 'button') {
      // 如果有当前邀请的队伍，使用队伍信息
      if (this.currentInviteTeam) {
        // 分享成功后关闭邀请弹窗
        setTimeout(() => {
          this.hideInvitePopup();
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        }, 500);

        // 获取新的随机标题和图片
        const shareData = getRandomShareTitleWithImage();
        return {
          title: shareData.title,
          path: `/pages/team/detail?id=${this.currentInviteTeam.id}`,
          imageUrl: shareData.imageUrl
        };
      }

      // 使用通用分享配置
      return {
        title: this.shareConfig.title,
        path: this.shareConfig.path,
        imageUrl: this.shareConfig.imageUrl
      };
    }

    // 默认分享
    return {
      title: "王者荣耀开黑组队，一起上分！",
      path: `/pages/team/detail?id=${this.teamId}`,
      imageUrl: ''
    };
  },
  // #endif

  methods: {
    // 加载队伍详情
    async loadTeamDetail() {
      try {
        this.loading = true;
        const response = await getGameKingTeam(this.teamId);

        if (response) {
          this.teamDetail = this.convertTeamData(response);
        } else {
          this.teamDetail = null;
        }
      } catch (error) {
        console.error('加载队伍详情失败:', error);
        this.teamDetail = null;
        uni.showToast({
          title: error.msg || error.message || '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    // 获取用户游戏账号列表
    async fetchUserGameAccounts(showErrorToast = false) {
      this.accountsLoading = true;
      try {
        const res = await getUserGameAccounts();
        if (res && res.length > 0) {
          // 获取当前登录用户的头像
          const userAvatar = this.userInfo?.avatar || 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg';

          // 转换后端数据格式为前端使用的格式
          this.gameAccounts = res.map(account => {
            return {
              id: account.id,
              nickname: account.gameId,
              avatar: userAvatar, // 使用用户头像替代游戏账号头像
              rank: this.getRankNameByLevel(account.rankLevel),
              gameId: account.gameId,
              serverType: account.areaType === 1 ? 'wechat' : 'qq',
              contactNumber: account.contact,
              auditStatus: account.auditStatus, // 审核状态
              isDefault: account.isDefault === 1 // 是否为默认账号
            };
          });

          // 设置当前选中的账号（优先选择默认账号）
          const defaultAccount = this.gameAccounts.find(account => account.isDefault);
          if (defaultAccount) {
            this.currentGameAccount = defaultAccount;
          }
          // 如果没有默认账号，选择第一个审核通过的账号
          else {
            const approvedAccount = this.gameAccounts.find(acc => acc.auditStatus === 1);
            if (approvedAccount) {
              this.currentGameAccount = approvedAccount;
            } else if (this.gameAccounts.length > 0) {
              this.currentGameAccount = this.gameAccounts[0];
            }
          }
        } else if (this.userInfo) {
          // 如果没有游戏账号但有用户信息，更新当前账号的头像
          this.currentGameAccount.avatar = this.userInfo.avatar || this.currentGameAccount.avatar;
        } else {
          this.gameAccounts = [];
          // 保持默认的currentGameAccount结构，只更新头像
          if (this.userInfo?.avatar) {
            this.currentGameAccount.avatar = this.userInfo.avatar;
          }
        }
        return res; // 返回结果，支持链式调用
      } catch (error) {
        console.error('获取游戏账号失败:', error);
        this.gameAccounts = [];
        // 保持默认的currentGameAccount结构，只更新头像
        if (this.userInfo?.avatar) {
          this.currentGameAccount.avatar = this.userInfo.avatar;
        }

        // 只有在明确要求显示错误提示时才显示
        if (showErrorToast) {
          uni.showToast({
            title: error.msg || error.message || '获取游戏账号失败',
            icon: 'none'
          });
        }

        // 不抛出错误，避免影响页面正常显示
        return null;
      } finally {
        this.accountsLoading = false;
      }
    },

    // 转换团队数据格式（与列表页面完全一致）
    convertTeamData(team) {
      // 获取对应的段位名称
      const rankName = this.getRankNameByLevel(team.rankLevel);

      // 获取当前登录用户ID
      const userId = uni.getStorageSync('userId');

      // 设置默认头像
      const defaultAvatar = 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg';

      // 构建成员列表
      const members = team.members.map(member => {
        return {
          id: member.id, // 添加成员ID，用于退出队伍
          userId: member.userId, // 添加用户ID，用于标识当前用户
          avatar: member.avatar || defaultAvatar,
          position: member.position,
          name: member.nickname,
          gameId: member.gameId,
          contactNumber: member.contact,
          sex: member.sex, // 添加性别字段
          isContactUnlocked: team.canDecrypt === true,
          isCurrentUser: member.userId === userId, // 添加标识，用于识别当前用户
          isBlacklisted: member.isBlacklisted || false // 添加拉黑状态
        };
      });

      // 构建位置信息
      const positions = [
        { id: 1, name: '上单', isOccupied: false },
        { id: 2, name: '打野', isOccupied: false },
        { id: 3, name: '中单', isOccupied: false },
        { id: 4, name: '射手', isOccupied: false },
        { id: 5, name: '辅助', isOccupied: false }
      ];

      // 标记已占用的位置
      members.forEach(member => {
        const position = positions.find(pos => pos.id === member.position);
        if (position) {
          position.isOccupied = true;
        }
      });

      // 检查当前用户是否已加入队伍
      const joinedMember = members.find(member => member.isCurrentUser);

      // 返回转换后的团队数据
      return {
        id: team.id,
        creatorId: team.userId, // 添加创建者ID，用于聊天功能
        creatorName: team.nickname || '', // 即使是空字符串也保留，让模板中的逻辑处理
        creatorAvatar: team.avatar || defaultAvatar, // 确保队长头像有默认值
        creatorGender: team.gender, // 直接使用数字格式
        rankName: rankName,
        serverType: team.areaType === 1 ? 'wechat' : 'qq',
        teamType: this.getTeamTypeKey(team.teamType),
        creatorSuccessCount: team.successCount || 0, // 假设后端会返回成功组队次数
        title: team.title,
        description: team.description || '',
        teamStatus: this.getTeamStatusText(team.status),
        createTime: this.formatTime(team.createTime),
        currentMembers: members.length,
        maxMembers: 5,
        location: team.location || '未知',
        positions: positions,
        members: members,
        isContactUnlocked: team.canDecrypt === true,
        joinedByCurrentUser: !!joinedMember, // 转换为布尔值
        joinedMemberId: joinedMember ? joinedMember.id : null, // 保存加入的成员ID，用于退出队伍
        isTeamFull: team.isTeamFull === true, // 队伍是否满员
        rankScreenshot: team.rankScreenshot, // 排位截图URL
        rankResult: team.rankResult || 0 // 排位结果：0未知 1胜利 2失败
      };
    },

    // 获取状态文字
    getStatusText(status) {
      const statusMap = {
        0: '组队中',
        1: '进行中',
        2: '已完成'
      };
      return statusMap[status] || '未知';
    },

    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'recruiting',
        1: 'playing',
        2: 'completed'
      };
      return classMap[status] || '';
    },

    // 根据段位等级获取段位名称
    getRankNameByLevel(level) {
      return getRankNameById(level);
    },

    // 根据值获取teamType的key
    getTeamTypeKey(value) {
      const typeMap = {
        1: 'fun',   // 娱乐局
        2: 'rank',  // 排位赛
        3: 'social' // 找对象
      };
      return typeMap[value] || 'fun';
    },

    // 获取队伍状态文字
    getTeamStatusText(status) {
      const statusMap = {
        0: '招募中',
        1: '已解散',
        2: '已完成'
      };
      return statusMap[status] || '招募中';
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return '';

      // 这里可以根据需求格式化时间，例如：多久之前
      const now = new Date().getTime();
      const createTime = new Date(time);
      const diff = now - createTime;

      // 小于1分钟
      if (diff < 60000) {
        return '刚刚';
      }
      // 小于1小时
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前';
      }
      // 小于1天
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前';
      }
      // 大于1天
      return Math.floor(diff / 86400000) + '天前';
    },

    // 获取位置名称
    getPositionName(team, positionId) {
      const position = team.positions?.find(p => p.id === positionId);
      return position ? position.name : '未知位置';
    },

    // 获取空位数组
    getEmptySlots(team) {
      const emptyCount = Math.max(0, 5 - team.currentMembers);
      return Array.from({ length: emptyCount }, (_, index) => ({
        emptyId: `empty-${index}`
      }));
    },

    // 加入队伍（与列表页面逻辑完全一致）
    joinTeam(team) {
      // 检查队伍是否已满员且用户已加入
      if (team.joinedByCurrentUser && team.currentMembers >= team.maxMembers) {
        // 队伍已满员且用户已加入，不执行任何操作
        return;
      }

      // 检查用户是否已加入队伍
      if (team.joinedByCurrentUser) {
        // 已加入当前队伍，直接退出
        this.leaveTeam(team);
        return;
      }

      // 检查当前账号是否已选择
      if (!this.currentGameAccount || !this.currentGameAccount.id) {
        uni.showToast({
          title: '请先选择游戏账号',
          icon: 'none'
        });
        this.showAccountSelector();
        return;
      }

      // 用户未加入任何队伍，继续加入流程
      this.processJoinTeam(team);
    },

    // 处理加入队伍的逻辑
    processJoinTeam(team) {
      // 获取可选的位置
      const availablePositions = team.positions.filter(position => !position.isOccupied);

      // 如果没有可用位置
      if (availablePositions.length === 0) {
        uni.showToast({
          title: '该队伍所有位置已被占用',
          icon: 'none'
        });
        return;
      }

      // 显示位置选择弹窗
      this.showPositionSelector(team, availablePositions);
    },

    // 显示位置选择弹窗
    showPositionSelector(team, availablePositions) {
      // 构建位置选择列表
      const positionList = availablePositions.map(position => position.name);

      uni.showActionSheet({
        itemList: positionList,
        success: (res) => {
          const selectedPosition = availablePositions[res.tapIndex];
          this.confirmJoinTeam(team, selectedPosition);
        },
        fail: () => {
          // 用户取消选择
        }
      });
    },

    // 确认加入队伍
    async confirmJoinTeam(team, selectedPosition) {
      uni.showModal({
        title: '确认加入',
        content: `您选择的位置是【${selectedPosition.name}】，是否确认加入"${team.title}"队伍？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              // 构造加入队伍的请求参数
              const joinData = {
                teamId: team.id,
                accountId: this.currentGameAccount.id,
                contact: this.currentGameAccount.contactNumber,
                position: selectedPosition.id
              };

              // 调用后端接口加入队伍
              const memberId = await joinGameKingTeam(joinData);

              // 重新加载队伍详情
              await this.loadTeamDetail();

              // 根据加入后的队伍人数显示不同提示
              if (this.teamDetail.currentMembers === 5) {
                uni.showModal({
                  title: '加入成功',
                  content: '恭喜！队伍已满员，游戏ID和联系方式已解锁，快去联系队友开始游戏吧！',
                  showCancel: false,
                  confirmText: '知道了'
                });
              } else if (this.teamDetail.currentMembers === 1) {
                // 仅有自己一人时，直接显示邀请好友对话框
                this.showInviteFriendsDialog(this.teamDetail);
              } else {
                // 队伍未满且不止一人，显示邀请好友对话框
                this.showInviteFriendsDialog(this.teamDetail);
              }

            } catch (error) {
              console.error('加入队伍失败:', error);

              // 检查是否是账号区服与队伍区服不一致的错误
              if (error.code === 1018001204) {
                // 显示提示对话框
                uni.showModal({
                  title: '账号区服不匹配',
                  content: '您当前选择的账号区服与队伍区服不一致，需要切换到匹配的账号才能加入',
                  confirmText: '去切换',
                  success: (res) => {
                    if (res.confirm) {
                      // 用户点击确认，显示账号选择器
                      this.showAccountSelector();
                    }
                  }
                });
              } else {
                // 其他错误正常提示
                uni.showToast({
                  title: error.message || error.msg || '加入队伍失败，请稍后重试',
                  icon: 'none'
                });
              }
            }
          }
        }
      });
    },

    // 离开队伍
    async leaveTeam(team) {
      uni.showModal({
        title: '确认退出',
        content: '是否确认退出该队伍？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: '退出中...',
                mask: true
              });

              // 检查是否有成员ID
              if (!team.joinedMemberId) {
                throw new Error('未找到您在该队伍中的信息');
              }

              // 调用后端接口退出队伍
              await leaveGameKingTeam(team.joinedMemberId);

              // 关闭加载提示
              uni.hideLoading();

              // 显示退出成功提示
              uni.showToast({
                title: '已退出队伍',
                icon: 'success'
              });

              // 重新加载队伍详情
              await this.loadTeamDetail();

            } catch (error) {
              uni.hideLoading();
              console.error('退出队伍失败:', error);
              uni.showToast({
                title: error.msg || error.message || '退出队伍失败，请稍后重试',
                icon: 'none'
              });
            }
          }
        }
      });
    },

    // 显示游戏账号选择器
    showAccountSelector() {
      this.showAccountSelectorPopup = true;
      // 在弹窗打开时自动刷新账号列表，显示错误提示
      this.fetchUserGameAccounts(true);
    },

    // 隐藏游戏账号选择器
    hideAccountSelector() {
      this.showAccountSelectorPopup = false;
    },

    // 切换账号选择器弹窗状态
    toggleAccountSelector() {
      if (this.showAccountSelectorPopup) {
        this.hideAccountSelector();
      } else {
        this.showAccountSelector();
      }
    },

    // 刷新账号列表
    refreshAccountList() {
      this.fetchUserGameAccounts(true);
    },

    // 切换账号
    async switchAccount(account) {
      // 检查账号状态
      if (account.auditStatus === 2) {
        uni.showToast({
          title: '该账号已被拒绝，无法使用',
          icon: 'none'
        });
        return;
      }

      try {
        // 调用后端API切换默认账号
        await switchDefaultAccount(account.id);

        // 更新本地状态
        this.currentGameAccount = account;
        this.hideAccountSelector();

        // 重新获取账号列表以更新默认状态
        await this.fetchUserGameAccounts();

        uni.showToast({
          title: '账号切换成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('切换账号失败:', error);
        uni.showToast({
          title: error.msg || error.message || '切换账号失败',
          icon: 'none'
        });
      }
    },

    // 编辑游戏账号
    editGameAccount(account) {
      uni.navigateTo({
        url: `/pages/team/add-account?mode=edit&id=${account.id}`
      });
    },

    // 添加游戏账号
    addGameAccount() {
      uni.navigateTo({
        url: '/pages/team/add-account'
      });
    },

    // 返回上一页（保留方法以备需要）
    goBack() {
      uni.navigateBack();
    },

    // 返回首页
    goHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },

    // 返回列表
    goBack() {
      uni.navigateBack();
    },

    // 创建新组队
    createNewTeam() {
      uni.navigateTo({
        url: '/pages/team/create'
      });
    },

    // 准备分享（微信小程序环境）
    prepareShare(team) {
      // 获取随机标题和对应图片
      const shareData = getRandomShareTitleWithImage();

      // 设置分享配置
      this.shareConfig.team = team;
      this.shareConfig.title = shareData.title;
      this.shareConfig.path = `/pages/team/detail?id=${team.id}`;
      this.shareConfig.imageUrl = shareData.imageUrl;

      console.log('准备分享队伍:', team.id, '分享标题:', this.shareConfig.title, '分享图片:', this.shareConfig.imageUrl);
    },

    // 显示邀请弹窗（非微信环境）
    showInviteModal(team) {
      uni.showActionSheet({
        itemList: ['复制邀请链接'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.copyInviteLink(team);
          }
        }
      });
    },

    // 分享到微信好友
    shareToWechat(team) {
      // #ifdef MP-WEIXIN
      wx.shareAppMessage({
        title: `${team.creatorName}邀请你一起开黑！`,
        path: `/pages/team/detail?id=${team.id}`,
        imageUrl: '/static/images/share-cover.jpg',
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        }
      });
      // #endif

      // #ifndef MP-WEIXIN
      this.copyInviteLink(team);
      // #endif
    },

    // 复制邀请链接
    copyInviteLink(team) {
      // 构建H5邀请链接
      const h5InviteUrl = `${config.h5URL}/#/pages/team/detail?id=${team.id}`;

      const inviteText = `${team.creatorName}邀请你加入王者荣耀队伍！\n\n队伍信息：\n人数：${team.currentMembers}/${team.maxMembers}\n开黑时间：${team.startTime}\n服务器：${team.serverType === 'qq' ? 'QQ区' : '微信区'}\n\n点击链接加入：${h5InviteUrl}`;

      uni.setClipboardData({
        data: inviteText,
        success: () => {
          uni.showToast({
            title: '邀请信息已复制',
            icon: 'success',
            duration: 2000
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },



    // 显示邀请好友弹窗
    showInviteFriendsDialog(team) {
      setTimeout(() => {
        // 使用随机文案
        const message = getRandomInviteMessage(team.currentMembers);

        // 设置分享配置，为分享做准备
        this.prepareShare(team);

        // 设置弹窗数据并显示
        this.currentInviteTeam = team;
        this.inviteMessage = message;
        this.showInvitePopup = true;
      }, 500);
    },

    // 隐藏邀请弹窗
    hideInvitePopup() {
      this.showInvitePopup = false;
      this.currentInviteTeam = null;
      this.inviteMessage = '';
    },

    // 分享按钮点击事件
    onShareButtonTap() {
      // 这个方法会在用户点击分享按钮时触发
      // 实际的分享逻辑由 onShareAppMessage 处理
      console.log('分享按钮被点击');
    },

    // 复制游戏ID
    copyGameId(gameId) {
      uni.setClipboardData({
        data: gameId,
        success: () => {
          uni.showToast({
            title: '游戏ID已复制',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },

    // 复制联系方式
    copyContact(contactNumber) {
      uni.setClipboardData({
        data: contactNumber,
        success: () => {
          uni.showToast({
            title: '联系方式已复制',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },

    // 复制游戏ID
    copyGameId(gameId) {
      uni.setClipboardData({
        data: gameId,
        success: () => {
          uni.showToast({
            title: '游戏ID已复制',
            icon: 'success'
          });
        }
      });
    },

    // 复制联系方式
    copyContact(contact) {
      uni.setClipboardData({
        data: contact,
        success: () => {
          uni.showToast({
            title: '联系方式已复制',
            icon: 'success'
          });
        }
      });
    },

    // 预览排位截图
    previewScreenshot(imageUrl) {
      const url = imageUrl || this.teamDetail.rankScreenshot;
      if (url) {
        uni.previewImage({
          urls: [url],
          current: url
        });
      }
    },

    /**
     * 判断当前用户是否为创建者
     * @param {Object} team - 队伍对象
     * @returns {Boolean} 是否为创建者
     */
    isCurrentUserCreator(team) {
      // 优先从store获取当前用户ID，如果没有则从本地存储获取
      const currentUserId = this.$store.state.user.userInfo?.id || uni.getStorageSync('userId');
      return team.creatorId === currentUserId;
    },

    /**
     * 切换黑名单状态
     * @param {Object} team - 队伍对象
     * @param {Object} member - 成员对象
     */
    async toggleBlacklist(team, member) {
      try {
        const isCurrentlyBlacklisted = member.isBlacklisted;
        const action = isCurrentlyBlacklisted ? '取消拉黑' : '拉黑';

        // 确认操作
        const confirmResult = await new Promise((resolve) => {
          uni.showModal({
            title: '确认操作',
            content: `确定要${action}该成员吗？`,
            success: (res) => resolve(res.confirm)
          });
        });

        if (!confirmResult) return;

        // 调用后端API
        if (isCurrentlyBlacklisted) {
          // 取消拉黑
          await removeBlacklist({
            blacklistedUserId: member.userId
          });
        } else {
          // 拉黑
          await addBlacklist({
            blacklistedUserId: member.userId,
            reason: '组队违规行为'
          });
        }

        // 更新本地状态
        member.isBlacklisted = !isCurrentlyBlacklisted;

        uni.showToast({
          title: `${action}成功`,
          icon: 'success'
        });
      } catch (error) {
        console.error('拉黑操作失败:', error);
        uni.showToast({
          title: error.msg || error.message || '操作失败',
          icon: 'error'
        });
      }
    },

    /**
     * 选择排位截图并立即上传
     * @param {Number} teamId - 队伍ID
     */
    async chooseRankScreenshot(teamId) {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: resolve,
            fail: reject
          });
        });

        const filePath = res.tempFilePaths[0];

        // 如果是重新上传，清理之前的上传结果
        if (this.teamDetail.uploadedRankScreenshot) {
          delete this.teamDetail.uploadedRankScreenshot;
        }

        // 设置上传状态
        this.$set(this.teamDetail, 'uploading', true);
        this.$set(this.teamDetail, 'uploadProgress', 0);

        // 立即上传图片
        const uploadResult = await uploadFile({
          filePath: filePath,
          fileType: 'game',
          onProgress: (progress) => {
            this.$set(this.teamDetail, 'uploadProgress', progress);
          }
        });

        // 上传成功，保存URL
        this.$set(this.teamDetail, 'uploadedRankScreenshot', uploadResult);
        this.$set(this.teamDetail, 'uploading', false);

        uni.showToast({
          title: '图片上传成功',
          icon: 'success'
        });

      } catch (error) {
        this.$set(this.teamDetail, 'uploading', false);

        if (!error.errMsg || !error.errMsg.includes('cancel')) {
          uni.showToast({
            title: '上传失败，请重试',
            icon: 'none'
          });
        }
      }
    },

    /**
     * 提交排位截图
     * @param {Number} teamId - 队伍ID
     */
    async submitRankScreenshot(teamId) {
      if (!this.teamDetail.uploadedRankScreenshot) {
        uni.showToast({
          title: '请先上传排位截图',
          icon: 'none'
        });
        return;
      }

      // 显示提交中
      uni.showLoading({
        title: '提交中...'
      });

      try {
        // 调用后端API提交排位截图URL
        await uploadRankScreenshot({
          teamId: teamId,
          rankScreenshot: this.teamDetail.uploadedRankScreenshot
        });

        // 更新队伍状态
        this.teamDetail.rankScreenshot = this.teamDetail.uploadedRankScreenshot;
        this.teamDetail.rankResult = 0; // 默认为未知，等待审核

        // 清理临时数据
        delete this.teamDetail.uploadedRankScreenshot;

        uni.hideLoading();
        uni.showToast({
          title: '截图提交成功',
          icon: 'success'
        });
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      }
    },

    // 返回列表
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
// 复用开黑列表页面的完整样式
.team-detail-page {
  background-color: #020303;
  min-height: 100vh;
}

// 游戏风格加载动画
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(circle at 20% 30%, rgba(179, 247, 60, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(255, 0, 150, 0.05) 0%, transparent 70%);
    animation: backgroundPulse 4s ease-in-out infinite;
  }
}

.game-loading {
  position: relative;
  width: 400rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 中心能量核心
.energy-core {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: radial-gradient(circle, #B3F73C 0%, #7CB518 50%, #4A6B0A 100%);
  box-shadow:
    0 0 40rpx #B3F73C,
    0 0 80rpx rgba(179, 247, 60, 0.5),
    inset 0 0 20rpx rgba(255, 255, 255, 0.3);
  animation: coreGlow 2s ease-in-out infinite alternate;
  z-index: 10;

  .core-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%, #B3F73C 100%);
    animation: coreInnerPulse 1.5s ease-in-out infinite;
  }

  .core-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid #B3F73C;
    animation: corePulse 2s ease-out infinite;
  }
}

// 旋转光环
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 2rpx solid rgba(179, 247, 60, 0.3);

  &.ring-1 {
    width: 200rpx;
    height: 200rpx;
    animation: orbitRotate 3s linear infinite;
  }

  &.ring-2 {
    width: 280rpx;
    height: 280rpx;
    animation: orbitRotate 4s linear infinite reverse;
  }

  .orbit-dot {
    position: absolute;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #B3F73C;
    box-shadow: 0 0 20rpx #B3F73C;

    &.dot-1 { top: -6rpx; left: 50%; transform: translateX(-50%); }
    &.dot-2 { bottom: -6rpx; left: 50%; transform: translateX(-50%); }
    &.dot-3 { top: 50%; left: -6rpx; transform: translateY(-50%); }
    &.dot-4 { top: 50%; right: -6rpx; transform: translateY(-50%); }
  }
}

// 外层粒子环
.particle-ring {
  position: absolute;
  width: 360rpx;
  height: 360rpx;

  .particle {
    position: absolute;
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: #00FFFF;
    box-shadow: 0 0 15rpx #00FFFF;
    animation: particleFloat 3s ease-in-out infinite;

    &.particle-1 { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    &.particle-2 { top: 25rpx; right: 25rpx; animation-delay: 0.375s; }
    &.particle-3 { top: 50%; right: 0; transform: translateY(-50%); animation-delay: 0.75s; }
    &.particle-4 { bottom: 25rpx; right: 25rpx; animation-delay: 1.125s; }
    &.particle-5 { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 1.5s; }
    &.particle-6 { bottom: 25rpx; left: 25rpx; animation-delay: 1.875s; }
    &.particle-7 { top: 50%; left: 0; transform: translateY(-50%); animation-delay: 2.25s; }
    &.particle-8 { top: 25rpx; left: 25rpx; animation-delay: 2.625s; }
  }
}

// 扫描线
.scan-line {
  position: absolute;
  width: 400rpx;
  height: 4rpx;
  background: linear-gradient(90deg, transparent 0%, #B3F73C 50%, transparent 100%);
  box-shadow: 0 0 20rpx #B3F73C;
  animation: scanMove 2s ease-in-out infinite;
}

// 加载文字
.loading-text-container {
  position: absolute;
  bottom: -120rpx;
  text-align: center;

  .loading-text {
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: bold;
    text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
    margin-bottom: 10rpx;
    display: block;
  }

  .loading-dots {
    display: flex;
    justify-content: center;
    gap: 5rpx;

    .dot {
      color: #B3F73C;
      font-size: 32rpx;
      font-weight: bold;
      animation: dotBounce 1.5s ease-in-out infinite;

      &:nth-child(1) { animation-delay: 0s; }
      &:nth-child(2) { animation-delay: 0.2s; }
      &:nth-child(3) { animation-delay: 0.4s; }
    }
  }
}

// 进度条
.progress-container {
  position: absolute;
  bottom: -200rpx;
  width: 300rpx;
  text-align: center;

  .progress-bar {
    width: 100%;
    height: 6rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3rpx;
    overflow: hidden;
    margin-bottom: 15rpx;

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #B3F73C 0%, #00FFFF 100%);
      border-radius: 3rpx;
      animation: progressFill 3s ease-in-out infinite;
      box-shadow: 0 0 10rpx #B3F73C;
    }
  }

  .progress-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 22rpx;
    letter-spacing: 2rpx;
    font-weight: bold;
    animation: textGlow 2s ease-in-out infinite alternate;
  }
}

.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(2, 3, 3, 0.9);
  backdrop-filter: blur(10rpx);
  padding: 20rpx 0;

  .nav-content {
    text-align: center;

    .nav-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #e0e0e0;
      position: relative;
      text-align: center;
      height: 70rpx;

      &::after {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: linear-gradient(90deg, #8eac21, #B3F73C);
        border-radius: 2rpx;
      }
    }
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;

  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 8rpx solid #B3F73C;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }

  .loading-text {
    color: #999999;
    font-size: 28rpx;
  }
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;

  .not-found-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 28rpx;
    margin-bottom: 40rpx;
  }

  .back-btn {
    background-color: #B3F73C;
    color: #000000;
    border-radius: 40rpx;
    padding: 20rpx 40rpx;
    font-size: 26rpx;
  }
}

.team-container {
  padding: 20rpx;
}

.team-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.team-creator {
  display: flex;
  align-items: center;
}

.creator-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #B3F73C;
  margin-right: 15rpx;

  &.male-border {
    border: 3rpx solid #0088FF;
  }

  &.female-border {
    border: 3rpx solid #FF6699;
  }
}

.creator-info {
  flex: 1;
}

.creator-name {
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.gender-icon {
  margin-left: 10rpx;
  font-size: 24rpx;

  &.male {
    color: #0088FF;
  }

  &.female {
    color: #FF6699;
  }
}

.creator-rank {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #CCCCCC;
  margin-top: 5rpx;
}

.rank-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, #3f2b0e 0%, #8b6c28 100%);
  color: #ffd04d;
  font-size: 22rpx;
  text-align: center;
  margin-right: 10rpx;

  &.small {
    padding: 2rpx 8rpx;
    font-size: 18rpx;
  }
}

.server-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background: rgba(179, 247, 60, 0.2);
  color: #B3F73C;
  font-size: 22rpx;
  text-align: center;
}

.team-type-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background: rgba(179, 247, 60, 0.2);
  color: #B3F73C;
  font-size: 22rpx;
  text-align: center;
  margin-left: 10rpx;
}

.creator-success-count {
  display: flex;
  align-items: center;
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #B3F73C;

  .tn-icon-flag {
    margin-right: 6rpx;
    font-size: 22rpx;
  }
}

.team-status {
  font-size: 24rpx;
  color: #B3F73C;
  padding: 5rpx 15rpx;
  background-color: rgba(179, 247, 60, 0.1);
  border-radius: 20rpx;
}

.team-info {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .team-title {
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .team-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }

  .team-details {
    display: flex;
    justify-content: space-between;
    margin-top: 16rpx;

    .team-detail {
      display: flex;
      align-items: center;

      .tn-icon-time, .tn-icon-people, .tn-icon-location {
        color: #B3F73C;
        font-size: 24rpx;
        margin-right: 6rpx;
      }

      text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 22rpx;
      }
    }
  }
}

.team-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  font-size: 24rpx;
  color: #CCCCCC;
}

.team-time {
  display: flex;
  align-items: center;

  .tn-icon-time {
    margin-right: 8rpx;
    color: #B3F73C;
  }
}

.team-members-count {
  display: flex;
  align-items: center;

  .tn-icon-group {
    margin-right: 8rpx;
    color: #B3F73C;
  }
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;

  .info-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 26rpx;
  }

  .info-value {
    color: #FFFFFF;
    font-size: 26rpx;
    font-weight: 500;
  }
}

.positions-section, .members-section {
  margin-bottom: 24rpx;
}

.section-title {
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.team-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.position-tag {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);

  &.filled {
    background-color: rgba(179, 247, 60, 0.1);
    border-color: rgba(179, 247, 60, 0.3);
  }

  .position-name {
    color: #FFFFFF;
    font-size: 22rpx;
    margin-right: 8rpx;
  }

  .position-rank {
    color: #B3F73C;
    font-size: 20rpx;
  }
}

.positions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
  gap: 12rpx;
}

.position-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  padding: 16rpx;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);

  &.filled {
    background-color: rgba(179, 247, 60, 0.1);
    border-color: rgba(179, 247, 60, 0.3);
  }

  .position-name {
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 4rpx;
  }

  .position-rank {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20rpx;
  }
}

.team-members {
  display: flex;
  margin-bottom: 20rpx;
  overflow-x: auto;
  padding: 10rpx 0;

  &::-webkit-scrollbar {
    display: none;
  }
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  min-width: 80rpx;
  position: relative;

  &.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 2rpx dashed rgba(255, 255, 255, 0.3);
    margin-right: 20rpx;

    .tn-icon-add {
      color: rgba(255, 255, 255, 0.3);
      font-size: 40rpx;
    }
  }
}

.members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;

  &.empty {
    .empty-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      border: 2rpx dashed rgba(255, 255, 255, 0.3);
      margin-bottom: 8rpx;

      .tn-icon-add {
        color: rgba(255, 255, 255, 0.5);
        font-size: 32rpx;
        margin-bottom: 4rpx;
      }

      .empty-text {
        color: rgba(255, 255, 255, 0.5);
        font-size: 18rpx;
      }
    }
  }
}

.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 8rpx;
  border: 2rpx solid #B3F73C;

  &.male-border {
    border: 3rpx solid #0088FF;
  }

  &.female-border {
    border: 3rpx solid #FF69B4;
  }
}

.member-info {
  text-align: center;
}

.member-name {
  color: #FFFFFF;
  font-size: 22rpx;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.member-rank {
  color: #B3F73C;
  font-size: 18rpx;
  margin-bottom: 2rpx;
}

.member-position {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18rpx;
}

/* 当前用户标记 */
.current-user-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #B3F73C;
  color: #000000;
  font-size: 20rpx;
  font-weight: bold;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #020303;
}

/* 当前用户成员容器样式 */
.team-member.current-user {
  position: relative;
}

.team-member.current-user .member-avatar {
  border: 3rpx solid #B3F73C !important;
}

.game-id-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.panel-title {
  color: #FFFFFF;
  font-size: 26rpx;
  font-weight: bold;
}

.lock-status {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22rpx;

  .tn-icon-lock {
    color: #FF6B6B;
    font-size: 24rpx;
    margin-right: 6rpx;
  }
}

.game-ids-list {
  .game-id-item {
    display: flex;
    align-items: center;
    padding: 16rpx;
    margin-bottom: 12rpx;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12rpx;

    &.locked {
      opacity: 0.6;
    }

    &.current-user {
      background-color: rgba(179, 247, 60, 0.1);
      border: 2rpx solid rgba(179, 247, 60, 0.3);
    }

    .id-position {
      width: 120rpx;
      color: #B3F73C;
      font-size: 24rpx;
      font-weight: bold;
    }

    .id-value {
      flex: 1;
      margin-right: 20rpx;

      .id-row {
        display: flex;
        margin-bottom: 4rpx;

        .id-label {
          width: 60rpx;
          color: rgba(255, 255, 255, 0.7);
          font-size: 22rpx;
        }

        text {
          color: #FFFFFF;
          font-size: 22rpx;
        }
      }
    }

    .id-actions {
      display: flex;
      gap: 12rpx;

      .id-copy {
        display: flex;
        align-items: center;
        padding: 8rpx 12rpx;
        background-color: rgba(179, 247, 60, 0.2);
        border-radius: 8rpx;

        .tn-icon-copy {
          color: #B3F73C;
          font-size: 20rpx;
          margin-right: 4rpx;
        }

        .copy-label {
          color: #B3F73C;
          font-size: 20rpx;
        }
      }
    }
  }
}

.invite-tip {
  display: flex;
  align-items: center;
  background-color: rgba(179, 247, 60, 0.1);
  border-radius: 12rpx;
  padding: 16rpx;
  margin-bottom: 24rpx;
  border-left: 4rpx solid #B3F73C;

  .tn-icon-info {
    color: #B3F73C;
    font-size: 32rpx;
    margin-right: 12rpx;
  }

  text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 24rpx;
    line-height: 1.4;
  }
}



.team-actions {
  display: flex;
  gap: 15rpx;
  margin-top: 20rpx;
}

.action-btn {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  font-size: 26rpx;
  font-weight: bold;
  text-align: center;
  border: none;

  &.join-btn {
    background: linear-gradient(135deg, rgba(179, 247, 60, 0.2) 0%, rgba(179, 247, 60, 0.1) 100%);
    color: #B3F73C;
    border: 1px solid rgba(179, 247, 60, 0.3);

    &.joined {
      background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(255, 107, 107, 0.1) 100%);
      color: #FF6B6B;
      border: 1px solid rgba(255, 107, 107, 0.3);
    }

    &.full {
      background: linear-gradient(135deg, rgba(128, 128, 128, 0.2) 0%, rgba(128, 128, 128, 0.1) 100%);
      color: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(128, 128, 128, 0.3);
    }

    &.completed {
      background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
      color: #4CAF50;
      border: 1px solid rgba(76, 175, 80, 0.3);
    }
  }

  &.chat-btn, &.invite-btn {
    background: linear-gradient(135deg, rgba(179, 247, 60, 0.2) 0%, rgba(179, 247, 60, 0.1) 100%);
    color: #B3F73C;
    border: 1px solid rgba(179, 247, 60, 0.3);

    .tn-icon-share, .tn-icon-add {
      margin-right: 6rpx;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 账号选择弹窗样式
.account-popup {
  background-color: #202020;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 30rpx;

  .account-popup-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .popup-title {
      color: #FFFFFF;
      font-size: 32rpx;
      font-weight: bold;
    }

    .refresh-btn {
      font-size: 36rpx;
      color: #B3F73C;
      padding: 10rpx;
      margin-left: auto;
      margin-right: 20rpx;
      transition: transform 0.3s;

      &:active {
        transform: rotate(180deg);
      }
    }

    .tn-icon-close {
      color: rgba(255, 255, 255, 0.6);
      font-size: 32rpx;
    }
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;

    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 8rpx solid #B3F73C;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
    }

    .loading-text {
      color: #999999;
      font-size: 28rpx;
    }
  }

  .empty-account-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;

    .empty-icon {
      color: rgba(255, 255, 255, 0.3);
      font-size: 80rpx;
      margin-bottom: 20rpx;
    }

    .empty-text {
      color: rgba(255, 255, 255, 0.6);
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .empty-sub-text {
      color: rgba(255, 255, 255, 0.4);
      font-size: 22rpx;
    }
  }

  .account-list-scroll {
    max-height: 550rpx;
    width: 100%;
    margin-bottom: 20rpx;
  }

  .account-list {
    width: 100%;
    padding: 20rpx 10rpx;

    .account-item {
      display: flex;
      align-items: center;
      padding: 20rpx 20rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      background-color: rgba(255, 255, 255, 0.05);
      border: 2rpx solid transparent;
      transition: all 0.3s ease;

      &.active {
        background-color: rgba(179, 247, 60, 0.1);
        border-color: #B3F73C;
      }

      &.disabled {
        opacity: 0.5;
        background-color: rgba(255, 255, 255, 0.02);
      }

      .item-info {
        flex: 1;

        .item-name {
          color: #FFFFFF;
          font-size: 28rpx;
          font-weight: bold;
          margin-bottom: 8rpx;
        }

        .item-game-rank {
          display: flex;
          align-items: center;
          gap: 12rpx;

          .item-server {
            color: #B3F73C;
            font-size: 22rpx;
            padding: 4rpx 8rpx;
            background-color: rgba(179, 247, 60, 0.2);
            border-radius: 8rpx;
          }

          .item-rank {
            color: rgba(255, 255, 255, 0.8);
            font-size: 22rpx;
          }

          .item-status {
            font-size: 20rpx;
            padding: 2rpx 8rpx;
            border-radius: 6rpx;

            &.status-pending {
              color: #FFC107;
              background-color: rgba(255, 193, 7, 0.2);
            }

            &.status-approved {
              color: #4CAF50;
              background-color: rgba(76, 175, 80, 0.2);
            }

            &.status-rejected {
              color: #F44336;
              background-color: rgba(244, 67, 54, 0.2);
            }
          }
        }
      }

      .item-actions {
        display: flex;
        align-items: center;
        gap: 15rpx;

        .item-check {
          color: #B3F73C;
          font-size: 32rpx;
        }

        .item-edit {
          color: rgba(255, 255, 255, 0.6);
          font-size: 28rpx;
        }
      }
    }
  }

  .account-popup-footer {
    .add-account-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80rpx;
      background: linear-gradient(135deg, #B3F73C 0%, #8eac21 100%);
      border-radius: 40rpx;
      color: #000000;
      font-size: 28rpx;
      font-weight: bold;
      border: none;

      .tn-icon-add {
        margin-right: 10rpx;
        font-size: 28rpx;
      }
    }
  }
}

// 导航栏账号选择器样式
.nav-left {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 18rpx;
}



.account-selector {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 35rpx;
  padding: 6rpx 16rpx;
  z-index: 9999;

  .account-avatar {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    margin-right: 9rpx;
  }

  .account-info {
    display: flex;
    flex-direction: column;
    margin-right: 9rpx;
    max-width: 160rpx;
    overflow: hidden;

    .account-name {
      color: #FFFFFF;
      font-size: 24rpx;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .account-rank-server {
      display: flex;
      align-items: center;
      gap: 8rpx;

      .account-server {
        color: #B3F73C;
        font-size: 18rpx;
        padding: 2rpx 6rpx;
        background-color: rgba(179, 247, 60, 0.2);
        border-radius: 6rpx;
      }

      .account-rank {
        color: rgba(255, 255, 255, 0.8);
        font-size: 18rpx;
      }
    }
  }

  .account-arrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 20rpx;
  }
}

.nav-title {
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
}

// 固定浮动返回首页按钮
.floating-home-btn {
  position: fixed;
  bottom: 60rpx;
  right: 30rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #B3F73C 0%, #7CB518 100%);
  box-shadow:
    0 6rpx 20rpx rgba(179, 247, 60, 0.4),
    0 3rpx 10rpx rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rpx;
  z-index: 1000;
  transition: all 0.3s ease;
  backdrop-filter: blur(10rpx);

  &:active {
    transform: scale(0.9);
    box-shadow:
      0 3rpx 10rpx rgba(179, 247, 60, 0.6),
      0 2rpx 6rpx rgba(0, 0, 0, 0.4);
  }

  &:hover {
    transform: translateY(-3rpx);
    box-shadow:
      0 8rpx 24rpx rgba(179, 247, 60, 0.5),
      0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  }

  .tn-icon-home-fill {
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;
  }

  .home-btn-text {
    color: #000000;
    font-size: 18rpx;
    font-weight: bold;
    line-height: 1;
  }
}

// 关键帧动画
@keyframes backgroundPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes coreGlow {
  0% {
    box-shadow:
      0 0 40rpx #B3F73C,
      0 0 80rpx rgba(179, 247, 60, 0.5),
      inset 0 0 20rpx rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow:
      0 0 60rpx #B3F73C,
      0 0 120rpx rgba(179, 247, 60, 0.8),
      inset 0 0 30rpx rgba(255, 255, 255, 0.5);
  }
}

@keyframes coreInnerPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

@keyframes corePulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes orbitRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes particleFloat {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes scanMove {
  0% { transform: translateY(-200rpx); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(200rpx); opacity: 0; }
}

@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10rpx); }
}

@keyframes progressFill {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

@keyframes textGlow {
  0% { text-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5); }
  100% { text-shadow: 0 0 15rpx rgba(179, 247, 60, 0.8); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 成员操作样式 */
.team-member {
  .member-actions {
    display: flex;
    justify-content: center;
    margin-top: 6rpx;

    .member-action {
      display: flex;
      align-items: center;
      padding: 4rpx 10rpx;
      border-radius: 6rpx;
      background-color: rgba(179, 247, 60, 0.1);
      color: #B3F73C;
      font-size: 20rpx;

      &.blacklist {
        margin-right: 10rpx;
      }

      text:first-child {
        margin-right: 4rpx;
        font-size: 18rpx;
      }
    }
  }
}

/* 队伍成员提示样式 */
.member-upload-tip {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.05));
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 24rpx;
  border: 1px solid rgba(255, 193, 7, 0.2);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(90deg, transparent, #FFC107, transparent);
  }

  .tip-content {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 26rpx;

    .tn-icon-info {
      color: #FFC107;
      margin-right: 12rpx;
      font-size: 28rpx;
    }

    .tip-text {
      line-height: 1.4;
      font-weight: 500;
    }
  }
}

/* 已上传排位截图状态显示样式 */
.record-rated {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 24rpx;

  .rated-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
    color: #FFFFFF;
    font-size: 26rpx;
    font-weight: bold;

    .rank-result {
      .result-text {
        padding: 6rpx 16rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        font-weight: bold;

        &.win {
          background: linear-gradient(135deg, #4CAF50, #2E7D32);
          color: #FFFFFF;
          box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
        }

        &.lose {
          background: linear-gradient(135deg, #F44336, #C62828);
          color: #FFFFFF;
          box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.3);
        }

        &.audit {
          background: linear-gradient(135deg, #FFC107, #FF8F00);
          color: #FFFFFF;
          box-shadow: 0 2rpx 8rpx rgba(255, 193, 7, 0.2);
        }
      }
    }
  }

  .rated-content {
    .rated-screenshot {
      margin-bottom: 10rpx;

      .screenshot {
        width: 100%;
        height: 320rpx;
        border-radius: 12rpx;
        object-fit: cover;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
      }
    }
  }
}

/* 排位截图上传区域样式 */
.record-action {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(90deg, transparent, #B3F73C, transparent);
  }

  .upload-tip {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 15rpx;
    background-color: rgba(179, 247, 60, 0.1);
    border-radius: 12rpx;
    border-left: 6rpx solid #B3F73C;

    .tn-icon-info {
      color: #B3F73C;
      margin-right: 12rpx;
      font-size: 28rpx;
    }

    .tip-text {
      color: rgba(255, 255, 255, 0.9);
      font-size: 24rpx;
      line-height: 1.4;
    }
  }

  .action-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    font-size: 26rpx;
    font-weight: bold;
    margin-bottom: 20rpx;

    .title-left {
      display: flex;
      align-items: center;

      .tn-icon-upload {
        color: #B3F73C;
        margin-right: 12rpx;
        font-size: 28rpx;
      }
    }

    .audit-status {
      .audit-text {
        padding: 6rpx 16rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        background: linear-gradient(135deg, #FFC107, #FF8F00);
        color: #FFFFFF;
        margin-left: auto;
        box-shadow: 0 2rpx 8rpx rgba(255, 193, 7, 0.2);
      }
    }
  }

  .upload-area {
    margin-bottom: 24rpx;
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;

    .screenshot {
      width: 100%;
      height: 320rpx;
      border-radius: 16rpx;
      object-fit: cover;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
    }

    .upload-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 320rpx;
      background: linear-gradient(135deg, rgba(179, 247, 60, 0.1), rgba(255, 255, 255, 0.05));
      border: 2rpx dashed rgba(179, 247, 60, 0.4);
      border-radius: 16rpx;
      color: rgba(255, 255, 255, 0.7);
      transition: all 0.3s ease;

      &:active {
        background: linear-gradient(135deg, rgba(179, 247, 60, 0.15), rgba(255, 255, 255, 0.08));
        border-color: rgba(179, 247, 60, 0.6);
        transform: scale(0.98);
      }

      .tn-icon-add {
        font-size: 48rpx;
        margin-bottom: 12rpx;
        color: #B3F73C;
      }

      text:last-child {
        font-size: 26rpx;
        font-weight: 500;
      }
    }

    .upload-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 10rpx;
      border-radius: 0 0 12rpx 12rpx;

      .progress-bar {
        width: 100%;
        height: 6rpx;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 3rpx;
        overflow: hidden;
        margin-bottom: 8rpx;

        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #B3F73C, #7ED321);
          border-radius: 3rpx;
          transition: width 0.3s ease;
        }
      }

      .progress-text {
        color: #FFFFFF;
        font-size: 22rpx;
        text-align: center;
      }
    }
  }

  .button-area {
    display: flex;
    gap: 16rpx;

    .reupload-btn, .submit-btn {
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 35rpx;
      font-size: 26rpx;
      font-weight: bold;
      flex: 1;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    }

    .single-btn {
      width: 100% !important;
      flex: none;
    }

    .reupload-btn {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10rpx);

      &:active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        transform: translateY(2rpx);
      }
    }

    .submit-btn {
      background: linear-gradient(135deg, #B3F73C, #7ED321);
      color: #020303;
      border: none;

      &:active {
        background: linear-gradient(135deg, #7ED321, #B3F73C);
        transform: translateY(2rpx);
      }

      &:disabled {
        background: linear-gradient(135deg, rgba(179, 247, 60, 0.3), rgba(126, 211, 33, 0.3));
        color: rgba(2, 3, 3, 0.5);
      }
    }
  }
}

// 邀请弹窗样式
.invite-popup {
  background-color: #202020;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;

  .invite-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      color: #FFFFFF;
      font-weight: bold;
    }

    .close-btn {
      font-size: 32rpx;
      color: #999999;
      padding: 10rpx;
    }
  }

  .invite-content {
    text-align: center;
    margin-bottom: 40rpx;

    .invite-icon {
      margin-bottom: 20rpx;

      .tn-icon-team-fill {
        font-size: 80rpx;
        color: #B3F73C;
      }
    }

    .invite-message {
      font-size: 28rpx;
      color: #CCCCCC;
      line-height: 1.6;
      display: block;
    }
  }

  .invite-actions {
    display: flex;
    gap: 20rpx;

    .invite-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: bold;
      border: none;

      .tn-icon-share,
      .tn-icon-copy {
        font-size: 32rpx;
        margin-right: 10rpx;
      }

      &.share-btn {
        background-color: #B3F73C;
        color: #000000;
      }

      &.copy-btn {
        background-color: #333333;
        color: #FFFFFF;
      }

      &.full-width {
        width: 100%;
      }
    }
  }
}
</style>
